<!-- 首页 -->
<template>
	<view>
		<mescroll-uni ref="mescrollTopicRef" height="100%" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
			<view>
				<u-image width="100%" height="500" :src="topic.image"></u-image>
				<view class="topic-info">
					<u-avatar :src="topic.avatar"></u-avatar>
					<view class="right-info">
						<view class="title">#{{topic.title}}#</view>
						<view class="desc">{{topic.topicDesc}}</view>
					</view>
				</view>
			</view>
			<view class="page-box">
				<talk-list @menu="menu" @more="more" @thumb="thumb" @chat="chat" :dataList="dataList"></talk-list>
			</view>
		</mescroll-uni>
		<u-action-sheet :list="sheetList" v-model="sheetShow" @click="clickSheet"></u-action-sheet>
		<user-auth></user-auth>
		<user-pay></user-pay>
		<cash-popup></cash-popup> 
		<user-phone></user-phone>
	</view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
import {mapState} from 'vuex'
export default {
	mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
	components: {
		
	},
	data() {
		return {
			CustomBar: this.CustomBar,
			upOption:{
				auto:false, // 不自动加载
				page: {
				 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				 	size: 20 // 每页数据的数量
				},
				noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty:{
			        icon: '/static/mescroll-empty.png',
					tip: '~ 暂无数据 ~', // 提示
					// btnText: '去看看'
				},
				toTop: {
					right: 40,
					width: 80,
					bottom: 200,
				},
			    textNoMore:'没有更多了'
			},
			userId: 0,
			dataList: [],
			topicId: 0,
			topic: {},
			sheetList: [],
			sheetShow: false,
		};
	},
	onLoad(option) {
		var topicId = option.topicId;
		this.topicId = topicId;
		var userId = uni.getStorageSync("userId");
		this.userId = userId;
		this.getDetail(topicId);
	},
	// 分享小程序
	onShareAppMessage(res) {
		return {
			title: '送你一个对象，快来「处CP」吧！',
			path: '/pages/index?shareUserId='+this.userId,
			imageUrl: 'http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220914/58242695c2a8421b892eced5f1bd3b15.jpeg',
		};
	},
	onShareTimeline() {
		return {
			title: '送你一个对象，快来「处CP」吧！',
			path: '/pages/index?shareUserId='+this.userId,
			imageUrl: 'http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220914/58242695c2a8421b892eced5f1bd3b15.jpeg',
		}
	},
	computed: {
		...mapState(['vuex_user']),
	},
	methods: {
		downCallback(mescroll) {
			mescroll.endSuccess();
			mescroll.resetUpScroll();
		},
		async upCallback(mescroll) {
			var userId = uni.getStorageSync("userId");
			this.$u.get('/wq/dynamic/list',{
				topicIds: this.topicId,
				orderBy: 'hot',
				pageNum: mescroll.num,
				appId: this.website.appId,
				pageSize: mescroll.size,
				userId: userId,
				lon: this.vuex_user.lon,
				lat: this.vuex_user.lat,
			}).then(res => {
				mescroll.endSuccess(res.rows.length);
				if (mescroll.num == 1) {
					this.dataList = res.rows;
				} else {
					this.dataList = this.dataList.concat(res.rows);
				}
			}).catch(err => {
				mescroll.endErr();
			});
		},
		menu(e) {
			this.sheetList = e;
			this.sheetShow = true;
		},
		clickSheet(index) {
			var sheet = this.sheetList[index];
			if('remove' == sheet.tag){
				this.deleteTopic(sheet.id);
			}else if('jubao' == sheet.tag){
				this.addBlack(sheet.userId);
			}else if('lahei' == sheet.tag){
				this.addBlackUser(sheet.userId);
			}
		},
		addBlack(userId) {
			this.$u.post('/system/user/addBlack',{
				userId: userId,
			}).then(res => {
				this.$u.toast('举报成功');
				//this.query();
			});
		},
		addBlackUser(userId) {
			this.$u.post('/system/user/addBlackUser',{
				userId: userId,
			}).then(res => {
				this.$u.toast('拉黑成功');
				//this.query();
			});
		},
		deleteTopic(id) {
			this.$u.get('/wq/dynamic/delete',{
				id: id,
			}).then(res => {
				this.mescroll.resetUpScroll();
			});
		},
		chat(e) {
			this.$u.route({
				url: 'packgeMine/pages/index/dynamic',
				params: {
					dynamicId: e.id,
				}
			});
		},
		thumb(e,i) {
			this.$u.post('/wq/dynamicGive/add',{
				dynamicId: e.id,
			}).then(res => {
				if(res.data){
					this.dataList[i].giveNum = this.dataList[i].giveNum + 1;
				}else{
					this.dataList[i].giveNum = this.dataList[i].giveNum - 1;
				}
			});
		},
		getDetail(topicId) {
			this.$u.get('/wq/topic/getDetail',{
				id: topicId,
			}).then(res => {
				this.topic = res.data;
			})
		},
		submit() {
			this.$u.get('/wq/topic/fans',{
				id: this.topic.id,
			}).then(res => {
				this.topic.fans = res.data;
			})
		},
	}
};
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	.navbar-box {
		position: absolute;
	}
	.send-btn {
		background-color: #2a2b2ee0;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5px 15px;
		border-radius: 20px;
		font-size: 12px;
		margin-right: 15px;
		border: 1px solid #ddd;
	}
	
	.fans-btn {
		background-color: #4b5770d4;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5px 15px;
		border-radius: 20px;
		font-size: 12px;
		margin-right: 15px;
	}
	.swiper-box {
		flex: 1;
	}
	.swiper-item {
		height: 100%;
	}
	.scroll-view {
		height: 100%;
		width: 100%;
		padding-bottom: 88rpx;
	}
	.top-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
		padding-right: 20px;
	}
	.u-tabs-box {
		width: 100px;
	}
	.page-box {
		background-color: #fff;
		width: 100%;
		top: 388rpx;
	}
	.dong-tai {
		font-size: 24rpx;
		color: #82848a;
	}
	.topic-info {
		position: absolute;
		top: 208rpx;
		padding: 15px;
		display: flex;
		align-items: center;
	}
	.right-info {
		margin-left: 10px;
	}
	.title {
		color: #fff;
		font-weight: bold;
		font-size: 14px;
	}
	.desc {
		color: #fff;
		font-size: 12px;
		margin-top: 5px;
	}
</style>
